<template>
  <div class="app-rule-form-container">
    <a-form-model
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :label-col="{ span: 2 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-model-item label="商品名称" prop="name">
        <a-input v-model="ruleForm.name" placeholder="商品名称" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="条形码" prop="bar_code">
        <a-input v-model="ruleForm.bar_code" placeholder="条形码" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="商品销售渠道" prop="sales_target">
        <a-checkbox-group v-model="ruleForm.sales_target">
          <a-checkbox :value="4">
            网店
          </a-checkbox>
          <a-checkbox :value="5">
            门店
          </a-checkbox>
        </a-checkbox-group>
        <div class="explain">
          网店可面向全国销售，门店可支持门店自提、同城配送
        </div>
      </a-form-model-item>
      <a-form-model-item label="主图" prop="cover_Image">
        <GallerySelector v-model="ruleForm.cover_Image"></GallerySelector>
      </a-form-model-item>
      <a-form-model-item label="轮播图" prop="carousel_images">
        <GallerySelectorMultiple
          v-model="ruleForm.carousel_images"
        ></GallerySelectorMultiple>
      </a-form-model-item>
      <a-form-model-item label="单位" prop="unit_three">
        <a-select
          v-model="ruleForm.unit_three"
          allow-clear
          placeholder="请选择"
          style="width:150px"
        >
          <a-select-option
            v-for="(item, index) in mockSelectList"
            :key="index"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="商品详情" prop="details">
        <Base-Editor v-model="ruleForm.details"></Base-Editor>
      </a-form-model-item>
      <div class="submit flex-start-center" style="padding-left:8.1%">
        <a-button type="default" @click="routerPush('/goods/manage/list')">
          返回列表
        </a-button>
        <a-button
          :loading="confirmLoading"
          type="primary"
          class="margin-left-20"
          @click="validateSubmit(2)"
        >
          保存
        </a-button>
        <a-button
          :loading="confirmLoading"
          type="primary"
          class="margin-left-20"
          @click="validateSubmit(1)"
        >
          上架
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
import clonedeep from 'lodash.clonedeep'
import rules from './rules'
export default {
  name: 'GoodsManageAddForm',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    },
    // 是否是编辑
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      confirmLoading: false,
      // 表单
      ruleForm: {},
      // 验证
      rules: {
        ...rules
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    validateSubmit(status) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.ruleForm.status = status
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 提交表单
    async submit() {
      const ruleForm = clonedeep(this.ruleForm)
      if (this.isEdit) {
        ruleForm.specifications = ruleForm.specifications.map(item => {
          return {
            sku_attr_id: item.sku_attr_id,
            sku_attr_name: item.sku_attr_name,
            sku_attr_value: item.sku_attr_value
          }
        })
      } else {
        ruleForm.specifications = ruleForm.specifications.map(item => {
          return {
            sku_attr_name: item.sku_attr_name,
            sku_attr_value: item.sku_attr_value.map(ele => ele.sku_val_name)
          }
        })
      }

      ruleForm.size_price = this.priceDetailList

      this.confirmLoading = true
      if (this.isEdit) {
        // 编辑
        const res = await this.$api.goodsManage.edit(ruleForm)
        if (res.code === 1) {
          this.$notification.success({
            message: res.msg
          })
          this.routerPush('/goods/manage/list')
        }
      } else {
        // 增加
        const res = await this.$api.goodsManage.add(ruleForm)
        if (res.code === 1) {
          this.$notification.success({
            message: res.msg
          })
          this.routerPush('/goods/manage/list')
        }
      }
      this.confirmLoading = false
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.app-rule-form-container {
  background-color: #fff;
  padding: 30px 10px;
}
</style>
